<template>
  <div class="mine-container">
    <div class="person-container">
      <div class="loginOut text-right px-8">
        <button
          class="text-gray-900 hover:text-blue-500 text-xs"
          @click="loginOut()"
        >
          退出登录
        </button>
      </div>
      <div class="avatar">
        <img src="@/image/swiper-02.jpg" alt="" />
      </div>
      <div class="name">
        {{ user.name }}
      </div>
      <div class="introduce">
        {{
          user.introduce == null || user.introduce == ""
            ? "这个人好像在元宇宙没有什么说的"
            : user.introduce
        }}
      </div>
    </div>
    <div class="inforamtion-container">
      <div class="info-menu-box">
        <div class="info-menu" v-for="(menu, mindex) in meunList" :key="mindex">
          <div
            class="title person-title"
            :class="{ persontitle: mindex == 0 }"
            @click="toPerson(mindex)"
          >
            {{ menu.title }}
          </div>
          <div class="info-ul">
            <div
              class="info-li"
              v-for="(item, lindex) in menu.menu"
              :key="lindex"
              @click="menuClick(mindex, lindex)"
              :class="{ active: menuIndex == mindex && liIndex == lindex }"
            >
              {{ item.name }}
            </div>
          </div>
        </div>
      </div>

      <div class="info-box">
        <router-view />
      </div>
    </div>
  </div>
</template>

<script>
import zfooter from "@/components/ZFooter.vue";
import store from "@/store";
import cookie from "@/utils/cookie";

export default {
  components: { zfooter },
  name: "",
  data() {
    return {
      menuIndex: 0,
      liIndex: -1,
      infosex: "男",
      user: "",
      meunList: [
        {
          title: "个人中心",
          menu: [
            {
              path: "mynft",
              name: "我的藏品",
            },
          ],
        },
        {
          title: "订单中心",
          menu: [
            {
              path: "buy",
              name: "我购买的",
            },
            {
              path: "sell",
              name: "我卖出的",
            },
          ],
        },
        {
          title: "支付管理",
          menu: [
            {
              path: "paymant",
              name: "我的钱包",
            },
          ],
        },
        {
          title: "设置管理",
          menu: [
            {
              path: "setting",
              name: "个人设置",
            },
          ],
        },
      ],
    };
  },
  methods: {
    menuClick(mindex, lindex) {
      this.menuIndex = mindex;
      this.liIndex = lindex;
      // console.log(this.menuIndex, this.liIndex)
      // // console.log(this.meunList[mindex].menu[lindex].name);
      this.$router
        .push("/mine/" + this.meunList[mindex].menu[lindex].path)
        .catch((err) => {});
    },
    toPerson(mindex) {
      if (mindex == 0) {
        this.menuIndex = 0;
        this.liIndex = -1;
        this.$router.push("/mine").catch((err) => {
          console.log();
        });
      }
    },
    getUser() {
      this.$taxios
        .postInfo("/getUserInfo", { token: this.$cookies.get("token") })
        .then((res) => {
          console.log("获取用户信息");
          console.log(res);
          this.user = res.userInfo;
          // this.$store.commit("setUser",this.user)
          console.log(this.user);
        });
    },
    open4() {
      this.$message.promptBox("用户未登录", "error");
    },
    open5() {
      this.$message.promptBox("退出登录");
    },
    loginOut() {
      this.open5();
      this.$store.commit("setUserToken");
      this.$router.push("/home");
    },
  },
  created() {
    let user =this.$cookies.get("token");
    if (user == null) {
      this.open4();
      this.$router.push("/login");
    }else{
      this.getUser();
    }
  },
};
</script>
<style  lang="less" scoped>
.mine-container {
  position: relative;
  margin-top: 100px;
  width: 100%;

  .person-container {
    width: 100%;
    height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgb(118, 109, 109);
    color: #fff;

    div {
      margin-top: 10px;
      margin-bottom: 10px;
    }
    .loginOut {
      width: 100%;
    }
    .avatar {
      position: relative;
      width: 100px;
      height: 100px;
      border: 1px solid;
      border-radius: 50%;
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .name {
      font-size: 28px;
    }
  }

  .inforamtion-container {
    position: relative;
    width: 100%;
    height: auto;
    display: flex;
    min-height: 700px;
    background: #fff;

    .info-menu-box {
      position: relative;
      padding-top: 20px;
      background: #fff;
      width: 200px;
      border-right: 1px solid rgba(128, 128, 128, 0.527);

      .info-menu {
        width: 100%;

        .title {
          height: 50px;
          line-height: 50px;
          font-size: 18px;
        }

        .persontitle {
          color: #2469e5;
          cursor: pointer;
        }

        .info-ul {
          position: relative;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          .info-li {
            position: relative;
            height: 35px;
            line-height: 35px;
            cursor: pointer;
          }

          .info-li.active::after {
            content: "";
            width: 15px;
            height: 5px;
            background: #2469e5;
            position: absolute;
            bottom: 0%;
            left: 0%;
            border-radius: 14px;
          }
        }
      }
    }

    .info-box {
      width: calc(100% - 200px);
      padding: 20px 10px 0 10px;
      box-sizing: border-box;
      display: flex;
      // align-items: center;
      justify-content: center;
    }
  }
}
</style>